﻿<template>
  <div class="up_load_act_wrapper">

     <div class="up_Load_header">
      <img src="../../static/img/back_ccc.png" class="gobakc_img"> 我的
     </div>

      <!-- my_rank s-->
      <!-- user_info box img s -->
    <div class="user_info">
      <div class="user_info_img" style="background-color:#9f5c2f">
        <div class="user_info_user_name">
          <p style="transform:translateY(50%)"><!--{{bottom_list.enroller.userName}}--></p>
        </div>

        <div class="wrap_info_user_img" style="position:relative;">
          <!-- music play s -->
          <div class="play_music" v-on:click="play_music(bottom_list.voice)">
          </div>
          <!-- music play e -->
          <!-- wrap_img s -->
          <div class="wrap_img" style="position:relative;">
            <!--<img v-bind:src="bottom_list.enroller.image|img_show_base" class="user_info_img" style="width:66vw;height:6rem;" />-->
            <img src="../../static/img/bg_all.png" class="user_info_img" style="width:66vw;height:6rem;" />
            <!-- 点赞s -->
            <div class="dianzan_activity" style="position:absolute;top:0;right:0;" v-on:click="dianzan_activity(bottom_list.id)">

              <img src="../../static/img/rank_heart.png" class="rank_heart_img"
                   style="display:inline;vertical-align:top;">
              <sapn style="vertical-align:middle;margin-right:2vw;margin-left:2vw;">12345</sapn>

            </div>
            <!-- 点赞e -->
          </div>
          <!-- wrap_img e -->


        </div>
        <div class="user_info_line">&nbsp;</div>
        <img src="../../static/img/more.png" class="more" />
      </div>
      </div>
      <!-- user_info box img e -->
      <!-- my_rank e -->
    </div>

</template>
<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import header from "./header_other/Header_other.vue"
  //limit_Scroll
  //import limit_scroll from "../../static/js/limit_scroll.js"
  var qs = require('qs');
  //axios.post('/foo', qs.stringify({ 'bar': 123 }));

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      add_s: true,
      record: "",
      music_url: "",
      play_data: false,
      del: false,
      pause_data:false,
      play_p: "",
      del_data: false,
      show_b_img_data: "",
      hide_show_b:true,
      base_url:""
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () {
    let base_url ="";
    if(sessionStorage.getItem("is_app") == true ||sessionStorage.getItem("is_app") == "true"){
      let base_url = common.get_base_url();
      console.log("base_url");
      console.log(base_url);
      this.base_url = base_url
    }
    this.$nextTick(() => {
      //图片添加
      let _this = this; // 下面的 this 是 input 指向input的
      this.$refs.file.addEventListener("change", (e) => {
        //promise s
        console.log("change__________________")
        console.log("+")
        let count = 0;
        let result = e.srcElement.files;

        //限制张数
        if (e.srcElement.files.length > 1) {
          Toast({
            message: '图像张数不能多于1张',
            position: 'bottom',
            duration: 2000
          });
          return;
        }

        let reader = new FileReader();//读取图片
        reader.readAsDataURL(result[0]);//get img url
        let _e = e;

        //可以获取啦呵呵
        reader.onload = (e) => {
          console.log("load");
          console.log(e);
          this.show_b_img_data = e.target.result

          this.hide_show_b = false;//显示图片
        }

      });

    })
  },
  methods: {
    //del_x
    del_x: function () {
      this.show_b_img_data = "";
      this.hide_show_b = true;

    },
    //添加图片
    add_img_f: function () {

      this.$refs.file.click();//触发选择文件
    },
    //删除语言
    del_voice: function () {
      this.pause_data = false;//暂停去掉
      this.add_s = true;//t添加出现
      this.del_data = false//删除去掉
      this.play_data = false//播放去掉

      this.music_url = ""//把地址去掉

    },
    //暂停
    play_pause: function () {
      this.play_data = true;//播放语音
      this.pause_data = false;//停止语音
      console.log("pause))))))))))))))))")
      //暂停操作
      //mui.plusReady(function () {
      //  this.play_p.pause();
      //})

    },
    //录音
    get_voice: function () {
      this.add_s = false;
      this.play_data = true;
      //record
      mui.plusReady(function () {
        let record = plus.audio.getRecorder();
        record.record({ filename: "_doc/audio/" }, function (e) {
          console.log("success_audio__________")
          this.music_url = e
        }, function (e) {
          alert("Audio record failed: " + e.message);
        });
      })
    },
    //播放音乐
    play_music: function () {

      this.play_data = false;//播放音乐 去掉
      this.pause_data = true;//暂停
      this.del_data = true;//删除语言

      mui.plusReady(function () {

       var p = plus.audio.createPlayer(this.music_url);
       this.play_p = p;


       p.play(function () {

         this.pause_data = true;
          alert("Audio play success!");
        }, function (e) {
          alert("Audio play failed: " + e.message);
        });
      })
    }
  },
  components: {
    header
  }
}
</script>
<style scoped>
  /* user_info s*/
  .user_info_bottom_write_box {
    height: 2rem;
    width: 100%;
  }

  .dianzan_activity {
    font-size: 0.6rem;
    color: #ffffff;
    padding-top: 0.6rem;
  }

  .rank_heart_img {
    width: 0.9rem;
    margin: 0 auto;
    display: block;
    margin-bottom: 0.1rem;
  }

  .user_info {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 95vw;
  }

  .user_info_music {
    height: 2.5rem;
    width: 100%;
    background-color: #e85454;
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
  }

  .user_info_img {
    width: 100%;
    background-color: #e85454;
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
  }

  .user_info_user_name {
    height: 1.2rem;
    padding: 0.4rem 0.3rem 0.4rem 0.4rem;
    width: 1.4rem;
    font-size: 3vw;
    background-color: #fff;
    color: #9f5c2f;
    border-radius: 1.5vw;
    letter-spacing: 2px;
    margin-top: 0.3rem;
    font-weight: 500;
    margin-left: 2vw;
  }

  .play_music {
    width: 55vw;
    height: 1.7rem;
    background-image: url(../../static/img/music_on_bot.png);
    background-size: cover;
    margin-top: 0.4em;
  }

  .user_info_line {
    width: 0.5vw;
    background-color: #fff;
  }

  .more {
    width: 9vw;
    display: block;
    margin-right: 1vw;
    max-height: 2rem;
  }
  /*user_info e*/
  /*img_show_b s*/
  .warp_jies {
    margin: 0 auto 5.3vw;
    width: 85vw;
    height: 27.4vw;
    border-radius: 4vw;
    box-shadow: 4px 4px 6px 4px #c3c2c2;
  }
  .del_x {
    position: absolute;
    top: 6vw;
    left: 6vw;
    width: 8vw;
    height: 8vw;
    text-align: center;
    line-height: 7vw;
    color: #fff;
    background-color: #ff0000;
    border-radius: 50%;
    font-size: 7vw;
    font-weight: 600;
    box-shadow: 0px 2px 2px 2px rgba(33, 33, 33, 0.45);
  }
  .up_Load_img {
    position: relative;
    overflow:hidden;
  }
  .img_show_b {
    width: 100%;
    height: 100%;
    display: block;
  }
  /*img_show_be */
  .add_voice {
    width: 40vw;
    height: 10vw;
    line-height: 10vw;
    color: #fff;
    background-color: #2aa1a5;
    border-radius: 4vw;
    margin: 8vw auto 0;
    box-shadow: 0px 2px 4px 6px rgba(195, 194, 194, 0.32);
  }
  .title {
    width: 95vw;
    height: 30vw;
    margin: 0 auto 0;
    /*margin-top:7.4vw;*/
    background-color: #fff;
    box-shadow: 2px 2px 4px 2px #c3c2c2;
    border-radius: 4vw;
  }
  .jies {
    border:0;
    resize: none;
    background-color: #fff;
    border-radius: 4vw;
    width:100%;
    height:100%;

  }
  .up_Load_header {
    /*position: relative;*/
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
  }
  .gobakc_img {
    width:6vw;
    position: absolute;
    left:3.2vw;
    top:50%;
    transform:translateY(-50%);
  }
  .up_Load_header {
    height: 11.7vw;
    line-height: 11.7vw;
    width: 100%;
    background-color: #9f5c2f;
    text-align: center;
    font-size: 4.6vw;
    letter-spacing: 1px;
    color: #fff;
  }
  .up_Load_img {
    background-color: #fff;
    width: 95.7vw;
    height: 82.5vw;
    border-radius: 4vw;
    box-shadow: 2px 2px 4px 2px #c3c2c2;
    margin: 3vw auto 3vw;
  }
  .up_load_act_wrapper {
    padding-top:11.7vw;
    height:100%;
    width:100%;
    background-color: #eeeeee;

  }
  .mid_box_w {
    color: #949494;
    font-size:4.5vw;
    line-height: 2;
    text-align:center;
    width:60vw;
    /*margin:3.6vw auto 0;*/
    padding-top:32vw;
    margin:0 auto;
  }
  #app{
    margin-top:0;
  }
</style>
